
class Snake {
    //蛇头元素
    head:HTMLElement;

    //蛇的身体(包括蛇头)
    bodies:HTMLCollection;

    //获取蛇的容器
    element:HTMLElement;

    constructor() {
        this.element=document.getElementById("snake")!;
        this.head=document.querySelector("#snake > div") as HTMLElement;
        this.bodies=document.getElementById("snake")!.getElementsByTagName("div");

    }

    //获取蛇的坐标x(蛇头）
    get X() {
        return this.head.offsetLeft;
    }
    //获取蛇的坐标y(蛇头）
    get Y() {
        return this.head.offsetTop;
    }

    //设置蛇的坐标x(蛇头）
    set X(value:number) {
        if(this.X===value){
           return;
        }
        if (value<0||value>290){
          throw new Error("蛇撞墙了!");
        }
        if(this.bodies[1]&& (this.bodies[1] as HTMLElement).offsetLeft===value){
           if(value>this.X){
               value=this.X-10;
           }else{
               value=this.X+10;
           }
        }

        this.moveBody();
        this.head.style.left = value + "px";
        this.checkHeadBody();
    }
    //设置蛇的坐标y(蛇头）
    set Y(value:number) {
        if(this.Y===value){
            return;
        }
        if (value<0||value>290){
            throw new Error("蛇撞墙了!");
        }
        if(this.bodies[1]&& (this.bodies[1] as HTMLElement).offsetTop===value){
            if(value>this.Y){
                value=this.Y-10;
            }else{
                value=this.Y+10;
            }
        }
        this.moveBody();
        this.head.style.top = value + "px";
        this.checkHeadBody();
    }

    //蛇增加身体
    addBody(){
        this.element.insertAdjacentHTML("beforeend","<div></div>")
    }

    //蛇移动身体
    moveBody(){
        // 将后面身体设置为前面身体的位置（从后往前改）
        for(let i=this.bodies.length-1;i>0;i--){
            // 获取前面身体的位置
            let X=(this.bodies[i-1] as HTMLElement).offsetLeft;
            let Y=(this.bodies[i-1] as HTMLElement).offsetTop;
            (this.bodies[i] as HTMLElement).style.left=X+'px';
            (this.bodies[i] as HTMLElement).style.top=Y+'px';
        }

    }

    //检查头部与身体是否相撞
    checkHeadBody(){
        for (let i=1;i<this.bodies.length;i++){
            let bd=this.bodies[i] as HTMLElement
            if(this.X===bd.offsetLeft&&this.Y==bd.offsetTop){
                throw new Error("撞到自己了")
            }
        }
    }
}

export default Snake;